<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0px" @click="showDialog">添加试卷</el-button>
    <el-button  type="warning" plain style="margin: 10px 10px" @click="showSomePages()">只显未审核或者正在审核或者审核未通过</el-button>
    <el-button  type="success" plain style="margin: 10px 10px" @click="getPageList()">显示全部试卷</el-button>
    <!-- 其中展示所有试卷的信息 -->
    <div>
        <el-steps :active="5" align-center >
            <el-step title="建立" ></el-step>
            <el-step title="编辑" ></el-step>
            <el-step title="完工" ></el-step>
            <el-step title="提交审核" ></el-step>
            <el-step title="审核结果" description="审核通过可以发布考试 或者 审核不通过"></el-step>
            <el-step title="已发布考试" ></el-step>   
        </el-steps>

        <!-- 展示所有试卷的信息 -->
        <el-table style="width: 100%" border :data="list" >
            <el-table-column label="进度" width="95">
                <!-- 其中以百分比的形式展示 -->
                <template slot-scope="scope">
                        <el-popover
                            placement="top-start"
                            trigger="hover"
                            :content= "showMes(scope.row.statusName)">
                            <el-progress 
                                type="circle" 
                                :percentage="percentage(scope.row.status)"
                                :status="showStatus(scope.row.status)" 
                                width="50"
                                slot="reference"
                                ></el-progress>
                        </el-popover>
                </template>
            </el-table-column>
            <!-- 当单击某一张试卷的题目时，跳转到该试卷的界面 -->
            <el-table-column prop="name" label="试卷名称" width  />

            <el-table-column prop="remark" label="试卷备注" width />

            <el-table-column label="详细信息" width="350" >
                <template slot-scope="{ row }">
                    <!-- 其中更改按钮和删除按钮只有管理者才有。进入编辑试卷的按钮只有管理者和参与编辑者有。观测者只能点击看到试卷简介和其中内容但是无法编辑 -->
                        <el-tooltip class="item" effect="dark" content="浏览或完善试卷题目" placement="top-end">
                            <el-button type="primary" icon="el-icon-s-order" circle @click="showExamPaper(row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="修改试卷信息以及参与教师信息" placement="top">
                            <el-button v-if="hasPermission(row)" type="primary" icon="el-icon-edit" circle @click="updateStore(row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="复制该试卷" placement="top">
                            <el-button v-if="hasPermission(row)" type="primary" icon="el-icon-document-copy" circle @click="copyPaper(row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除试卷" placement="bottom">
                            <el-button v-if="hasPermission(row)" type="danger" icon="el-icon-delete" circle @click="deleteStore(row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="试卷其他相关信息" placement="bottom-end">
                            <el-button type="info" icon="el-icon-info" circle @click="detailStore(row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="发布考试" placement="bottom-end">
                            <el-button v-if="examAllow(row)" type="info" icon="el-icon-upload2" circle @click="examExam(row)"></el-button>
                        </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 消息框 -->
    <div>
        <!-- 新建试卷或修改试卷 -->
        <el-dialog  width="800px"  :title="exampaper.id ? '修改试卷' : '添加试卷'" :visible.sync="dialogFormVisible">
            <el-form style="width=80%" :model="exampaper" :rules="rules" ref="ruleForm">
                <el-form-item label="试卷名称" label-width="100px" prop="name">
                    <el-input autocomplete="off" v-model="exampaper.name"></el-input>
                </el-form-item>
                <el-form-item label="试卷备注" label-width="100px" prop="remark">
                    <el-input type="textarea" placeholder="请输入内容"  maxlength="100"  show-word-limit  v-model="exampaper.remark">
                    </el-input>
                </el-form-item>
                <!-- 以下两项都是试卷创建完毕之后才可以的，因为创建完之后才生成试卷的id -->
                <div v-if="allowShow(exampaper)">
                    <el-form-item label="邀请其他老师参与" label-width="80px" prop="remark" >
                        <!-- 一是有检索框，根据姓名检索老师，二是选定老师的角色，三是确定按钮--提交之后才会返回消息 -->
                        <!-- 实时搜索，不用点击回车 -->
                        <el-autocomplete
                            class="inline-input"
                            v-model="name1"
                            :fetch-suggestions="querySearch"
                            placeholder="根据老师姓名查询"
                            maxlength="100"  
                            show-word-limit  
                            @select="handleSelect1"
                        ></el-autocomplete>
                        <!-- 下拉选择角色 -->
                        <el-select style="padding:10px" v-model="select1" placeholder="请选择权限">
                            <el-option label="管理者" value="1"></el-option>
                            <el-option label="参与者" value="2"></el-option>
                            <el-option label="观察者" value="3"></el-option>
                        </el-select>

                        <el-button type="primary" @click="inviteTeacher(teacher1.id,exampaper.id,select1)">确定添加</el-button>
                    </el-form-item>
                    
                    <el-steps :active="exampaper.status" finish-status="success">
                        <el-step title="建立"></el-step>
                        <el-step title="编辑"></el-step>
                        <el-step title="完工"></el-step>
                    </el-steps>
                    <el-button style="margin-top: 12px;" @click="nextStep(exampaper)">进入下一阶段</el-button>
                    <el-button style="margin-top: 12px;" @click="lastStep(exampaper)">返回上一阶段</el-button>
                </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addExamPaper">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 试卷详情的消息框 -->
        <el-dialog title="试卷详情" :visible.sync="detailVisible">
            <!-- 试卷的详情框 -->
            <el-descriptions-item >试卷创建时间：{{detailList.gmtCreate}}</el-descriptions-item><br>
            <el-descriptions-item >试卷最近修改时间:{{detailList.gmtModified}}</el-descriptions-item><br>
            您的权限:<el-tag>{{detailList.permissionName}}</el-tag>

            <el-descriptions title="其他参与老师"></el-descriptions>

            <el-table style="width: 100%" border :data="detailList.teachers" >
                <el-table-column prop="avatar" label="头像" width="100" align="center">
                    <template slot-scope="scope">
                        <el-avatar :src="scope.row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="95"/ align="center">
                <el-table-column label="姓名" width   align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger">{{ scope.row.name }}</el-button>
                    </template>                    
                </el-table-column>
                <el-table-column prop="number" label="id" width align="center"  />
                <el-table-column label="权限" width  align="center" >
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.permissionName }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width  align="center" />
                <el-table-column label="性别" width  align="center" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.sex == '1'?'男':'女' }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="150" v-if="hasPermission2(detailList.permissionId)">
                    <template slot-scope="{ row }">

                        <el-tooltip 
                            class="item" effect="dark"  content="修改老师权限" placement="bottom">
                            <el-button  type="info" icon="el-icon-info" circle @click="change(row)"></el-button>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="删除老师" placement="bottom-end">
                            <el-button  type="danger" icon="el-icon-delete"  circle @click="deleteTeacher(row)"></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="更改老师权限" :visible.sync="changeVisible">
            <!-- <el-form-item label="更改参与老师权限" label-width="80px"> -->

                <el-select style="padding:10px" v-model="select2" placeholder="请选择权限" >
                    <el-option label="管理者" value="1"></el-option>
                    <el-option label="参与者" value="2"></el-option>
                    <el-option label="观察者" value="3"></el-option>
                </el-select>
                <el-button type="primary" @click="changeTeacher(teacher2.id,detailList.id,select2)">确定更改</el-button>
            <!-- </el-form-item> -->
        </el-dialog>

        <!-- 发布考试时的对话框 -->
        <el-dialog title="发布考试" :visible.sync="examDialogue" width="80%" >
            <el-form  style="width=80%" :model="exam" :rules="rules" ref="exam">
                <el-form-item label="考试名称" label-width="100px" prop="name">
                    <el-input autocomplete="off" v-model="exam.name"></el-input>
                </el-form-item>
                <el-form-item label="考试备注" label-width="100px" prop="remark">
                    <el-input type="textarea" placeholder="请输入内容"  maxlength="100"  show-word-limit  v-model="exam.remark">
                    </el-input>
                </el-form-item>  
                <el-form-item>

                <el-form-item label="是否开启人脸验证" prop="isFaceCheck" required>
                    <el-radio-group v-model="exam.isFaceCheck">
                        <el-radio :label=true>是</el-radio>
                        <el-radio :label=false>否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-row>
                    <el-col span="10">
                        <el-form-item label="限时进入时间" required prop="timeLimit">
                            <el-input placeholder="单位：分钟" v-model="exam.timeLimit" style="width: 50%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="10">
                        <el-form-item label="持续时间" required prop="lastTime">
                            <el-input placeholder="单位：分钟" v-model="exam.lastTime" style="width: 50%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col span="10">
                        <el-form-item label="可提前交卷时间" prop="timeAdvance" required >
                            <el-input placeholder="单位：分钟" v-model="exam.timeAdvance" style="width: 50%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="10">
                    <el-form-item label="是否禁用复制粘贴" prop="isCopyPaste" required>
                        <el-radio-group v-model="exam.isCopyPaste">
                            <el-radio :label=true>是</el-radio>
                            <el-radio :label=false>否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col span="10">
                    <el-form-item label="考试开始时间"  prop="startTime" required >
                        <el-date-picker
                        v-model="exam.startTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    </el-col>
                    <el-col span="10">
                    <el-form-item label="考试结束时间"  prop="endTime" required >
                        <el-date-picker
                        v-model="exam.endTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    </el-col>
                </el-row>
                </el-form-item>
                <!-- 监考老师和阅卷老师的选择 -->
                <el-form-item>
                    <el-row >
                        <el-col :span="12"  >
                            <span>添加监考老师</span>
                            <div class="grid-content bg-purple">
                                <el-autocomplete
                                    clearable=true
                                    class="inline-input"
                                    v-model="name3"
                                    :fetch-suggestions="querySearch"
                                    placeholder="根据老师姓名查询"
                                    maxlength="100"  
                                    show-word-limit  
                                    @select="handleSelect3"
                                ></el-autocomplete>

                                <el-button type="primary" @click="addProctor(teacherProctor)" style="margin:0 5px;">添加</el-button>
                                <!-- 下面显示将要添加到发布试卷的监考老师 -->

                                <el-table :data="teacherProctors" style="width: 100%" height="160">
                                    <el-table-column prop="number" label="id" width="100">     </el-table-column>
                                    <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="120">
                                    <template slot-scope="scope">
                                        <el-button
                                        @click.native.prevent="deleteRow(scope.$index, teacherProctors)"
                                        type="text"
                                        size="small">
                                        移除
                                        </el-button>
                                    </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>

                        <!-- 阅卷老师的添加 -->
                        <el-col :span="12" >
                            <span>添加阅卷老师</span>
                            <div class="grid-content bg-purple-light">
                                <el-autocomplete
                                    clearable=true
                                    class="inline-input"
                                    v-model="name4"
                                    :fetch-suggestions="querySearch"
                                    placeholder="根据老师姓名查询"
                                    maxlength="100"  
                                    show-word-limit  
                                    @select="handleSelect4"
                                ></el-autocomplete>

                                <el-button type="primary" @click="addMarking(teacherMarking)" style="margin:0 5px;">添加</el-button>
                                <!-- 下面显示将要添加到发布试卷的监考老师 -->

                                <el-table :data="teacherMarkings" style="width: 100%" height="160">
                                    <el-table-column prop="number" label="id" width="100"> </el-table-column>
                                    <el-table-column prop="name" label="姓名" width="80"> </el-table-column>

                                    <el-table-column fixed="right" label="操作" width="120">
                                    <template slot-scope="scope">
                                        <el-button
                                        @click.native.prevent="deleteRow(scope.$index, teacherMarkings)"
                                        type="text"
                                        size="small">
                                        移除
                                        </el-button>
                                    </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="examDeliverAllow()" type="primary" @click="examDeliver()">发布考试</el-button>
                    <el-button type="primary" @click="examDialogue = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    
  </div>
</template>

<script>
export default {
    name: "all_exam_papers",
    data(){
        return{
            examFinal:{},// 奖要考试的试卷的信息
            examDialogue:false,//发布考试相关的对话框显示
            lander:'', //登陆者的姓名

            changeVisible:false,
            list: [],
            detailVisible:false,
            dialogFormVisible:false,
            exampaper:{
                id: "",
                name: "",
                status:"",  //试卷进程状态，即创建后，正修改，已完成，发布等等
                remark: "",
                statusName:"编辑",
                isDeleted: false,
                gmtCreate:"",//创建时间
                gmtModified:"",//修改时间
                permissionId:"",
                permissionName:""
            },

            //展示详情时所有的信息
            detailList: {},

            // 关于老师的permission单独放在一处，即下方的select
            teacher1:{
                id:"",
                number:'',
                name:"",
            },
            teacher2:{
                id:"",
                number:'',
                name:"",
            },

            rules: {
                //试卷名称验证规则
                name: [
                { required: true, message: "请输入试卷名称", trigger: "blur" },
                { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur",},
                ],
            },

            //查询老师时

            name1: '',//第一个选择中输入的老师的姓名
            name2: '',
            name3:'',
            name4:'',
            //权限绑定的是后面的value值。
            select1:'',//第一个选择中选择的权限。
            select2:'',


            // 考试发布时：
            exam:{
                // id:'',//考试的id，后台分配
                paperId:'', //发布考试时，预测试卷的id
                name:'',//试卷名称
                remark:'',//试卷备注
                isFaceCheck:'',//是否开启人脸验证
                timeLimit:'',//限时进入时间（分钟）
                timeAdvance:'',//是否可以提前交卷
                isCopyPaste:false,//是否禁用复制粘贴，默认不禁用
                startTime:'',//开始时间
                endTime:'',//结束时间
                lastTime:''//持续时间
                // gmtCreate:'',//创建时间，后台
                // gmtModified:'',//修改时间，后台
            },
            // 监考老师
            teacherProctor:{
                id:'',
                name:'',
            },
            // 阅卷老师
            teacherMarking:{
                id:'',
                name:'',
            },
            // 监考老师们，用于显示
            teacherProctors:[],
            // 阅卷老师们，用于显示
            teacherMarkings:[],

        };
    },
    mounted() {
    //获取试卷列表
    this.getPageList();
    this.lander =  this.$store.getters.name;
    },

    methods:{
        showMes(statusName){
            return statusName+"阶段";
        },
        showStatus(status){
            var per = status;
            if(per == 5){ return "exception";}    //审核不通过，可以修改后再次审核
            else if(per == 6){return "success";}    //审核通过，可以发布考试 
            else if(per == 7){return "warning";}    //已经发布考试，不能再更改    
            else{return ""}         
        },
        percentage(status){
            var per = status;
            if(per == 1){return 20;} //建立阶段
            else if(per == 2){return 40;}  //编辑阶段
            else if(per == 3){return 60;}  //完工阶段
            else if(per == 4){return 80;}    //提交审核状态
            else if(per == 5){ return 80;}    //审核不通过，可以修改后再次审核
            else if(per == 6){return 100;}    //审核通过，可以发布考试 
            else if(per == 7){return 100;}    //审核通过，已经发布考试
        },

        // 更改试卷的阶段
        nextStep(exampaper){
            if(parseInt(exampaper.status)<3){
                exampaper.status = parseInt(exampaper.status)+1;
            }
        },
        lastStep(exampaper){
            if(parseInt(exampaper.status)>1){
                exampaper.status = parseInt(exampaper.status)-1;
            }
        },

        // 新建试卷时没有id，只有新建试卷完成之后才有邀请老师和修改老师权限
        allowShow(e){
            if(e.id == ''){return false;}
            if(e.permissionId == 3 ){
                return false;}

            return true;
        },
        examAllow(row){
            if(row.status == 6 ){return true}
            else{return false}
        },
        // 获取所有试卷信息，即试卷列表
        async getPageList() {
            //获取所有试卷
            let result =
                await this.$API.exam_paper_management.examStoreList();
            if (result.code == 20000) {
                this.list = result.data.papers;
            }
        },
        
        // 只显示部分试卷
        async showSomePages(status){
            //获取部分试卷
            let result =
                await this.$API.exam_paper_management.getAllNoPassedPaper(status);
            if (result.code == 20000) {
                this.list = result.data.papers;
            } 
        },
        // 老师是否有权限修改试卷信息
        hasPermission(exampaper){
            if(exampaper.permissionId == 1){return true;}
            else {return false;}
        },
        // 老师是否有权限邀请老师或者删除试卷等
        hasPermission2(permissionId){
            if(permissionId == 1){return true;}
            else {return false;}
        },        
        // 显示对话框--新建试卷或者修改试卷时
        showDialog() {
        //显示对话框
            this.dialogFormVisible = true;
            //清空数据
            this.exampaper = { id: "", name: "", remark: "" };
        // 如果是新建试卷，那么肯定没有下方两个权限。如果是修改试卷，查看老师角色之后才能确定是否有下方的权限
        },
        // 预载老师的姓名

        async loadAll(name) {
            let re = 
                await this.$API.exam_paper_management.getTeacherByName(name); 

            if(re.code == 20000){
                let TeacherList = re.data.teachers;
                var result = [];

                for(var i=0;i<TeacherList.length;i++){
                    let t = {//收集几个更容易被区分的信息，拼接展示到列表中
                        id: TeacherList[i].id,
                        number: TeacherList[i].number,
                        name : TeacherList[i].name,
                        phone: TeacherList[i].phone,
                        sex: TeacherList[i].sex,
                        value: TeacherList[i].name+'-'+TeacherList[i].number+'-'+TeacherList[i].sex+'-'+TeacherList[i].phone  //建议列表中只将value显示出来,展示信息是id-name的拼接
                    };
                    result.push(t);
                    
                }

            return result;
            }
            else{
                return [];
            }

        },
        //将检索正确的老师姓名返回到建议列表中
        async querySearch(queryString, cb) {
            // 相当于watch属性加了过滤并返回值
            // 每次都和后台打交道，估计会有些慢。
            var results = await this.loadAll(queryString);
            cb(results); //将综合结果返回到下方的建议列表中
        },


        handleSelect1(item) {
            // 选中之后更新老师1的id和姓名
            this.teacher1.id = item.id;
            this.teacher1.name = item.name;
        }, 
        // 跳转到试卷内部进行修改
        showExamPaper(row){
            // 内部界面转换为整张试卷所在的界面
            // 跳转到该试卷所在的界面
            this.$router.push({
                name:'one_exam_paper',
                query:{
                    paper_info:JSON.stringify(row)
                },

            })
        },
        // 试卷信息更新
        updateStore(row) {
            this.dialogFormVisible = true;
            //将已有的题库信息赋值给表单
            this.exampaper = { ...row };
        },
        // 复制试卷
        async copyPaper(paper){
            let row = {};
            row.name = paper.name+"-复制版本";
            row.remark = paper.remark;
            var pId = paper.id;
            let result = await this.$API.exam_paper_management.pastePaper(row,pId);
            if(result.code==20000){
                this.getPageList();
                this.$message({
                type: "success",
                message: "复制成功",
                });
            }
            else{
                this.$message({
                type: "warning",
                message: "复制失败",
                });
            }           
        },
        //删除试卷
        deleteStore(row) {
            //弹框
            this.$confirm(`你确定删除${row.name}吗，试卷的全部内容会丢失哦！`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                //当用户点击确定按钮时会触发
                //向服务器发送请求
                // 先检验是否是管理者，否则无法删除这张试卷
                if(row.permissionId != 1){
                    this.$message({
                    type: "warning",
                    message: "您无法删除这张试卷",
                    });
                    return;
                    }
                let result = await this.$API.exam_paper_management.examDeleteStore(row.id);
                //如果删除成功
                if(result.code==20000){
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                //再次获取题库列表
                this.getPageList();
                }
                }).catch(() => {
                //当用户点击取消按钮时会触发
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },  

        //试卷的详细信息
        detailStore(row){
            this.detailVisible = true;
            this.detailList = row;
        },

        // 新建试卷或者修改试卷
        async addExamPaper() {
            //当全部验证字段通过，再去书写业务逻辑
            this.$refs.ruleForm.validate(async (success) => {
                //如果全部字段符合条件
                if (success) {
                this.dialogFormVisible = false;
                var message = this.lander;
                //发请求（添加试卷|修改试卷）
                let result =
                    await this.$API.exam_paper_management.examAddOrUpdateStore(this.exampaper,message);
                if (result.code == 20000) {
                    //弹出信息：添加试卷信息、修改试卷信息
                    this.$message({
                    type: "success",
                    message: this.exampaper.id ? "修改试卷成功" : "添加试卷成功",
                    });
                    //添加或者修改完后，更新展示试卷列表
                    this.getPageList();
                }
                } else {
                    this.$alert("error submit!!");
                return false;
                }
      });
        },

        //邀请其他老师共同出试卷或者让某老师查看试卷
        async inviteTeacher(teacherId,paperId,permission){
            if(this.select1 == null){this.$alert("您还未选择角色");}
            if(this.teacher1.name == null){this.$alert("您还未选中老师");}
            let result = await this.$API.exam_paper_management.inviteOneTeacherForPaper(teacherId,paperId,permission);
            if (result.code == 20000) {
                this.$message({
                type: "success",
                message: "邀请成功",
                });
                this.getPageList();
            }
            else{
                this.$message({
                type: "warning",
                message: "邀请失败",
                });
            }
        },

        change(teacher)
        {
            this.teacher2 = teacher;
            this.changeVisible = true;

        },

        //修改老师对改试卷的权限
        async changeTeacher(teacherId,paperId,permission){
            let result =await this.$API.exam_paper_management.updatePaperPermissionForTeacher(teacherId,paperId,permission);
            if (result.code == 20000) {
                this.$message({
                type: "success",
                message: "更改成功",
                });
                this.getPageList();
                this.changeVisible = false;
                this.detailVisible = false;
            }
        },

        //移除某个老师对改试卷的联系
        async deleteTeacher(teacher){
            var teacherId = teacher.id;
            var paperId = this.detailList.id;
            let result =await this.$API.exam_paper_management.deleteTeacherFromPaper(teacherId,paperId);

            if (result.code == 20000) {
                this.$message({
                type: "success",
                message: "移除成功",
                });
                this.getPageList();
                this.detailVisible = false;
                //因为删除之后，列表不能随之修改
            }
            else{
                this.$message({
                type: "warning",
                message: "移除失败",
                });
            }
        },

        // 发布考试的对话框
        examExam(row){
            this.examDialogue=true;
            this.examFinal=row;
            this.teacherMarkings = []
            this.teacherProctors = []
        },
        // 发布考试还是删除考试的按钮显示
        examDeliverAllow()
        {
            if(this.examFinal.status == 6){return true} //可以发布考试的状态
            else{return false} //已经发布考试的状态
        },

        // 选中监考老师
        handleSelect3(item) {
            // 选中之后更新老师1的id和姓名
            this.teacherProctor.id = item.id;
            this.teacherProctor.number = item.number;
            this.teacherProctor.name = item.name;
        },
        // 选中阅卷老师
        handleSelect4(item) {
            // 选中之后更新老师1的id和姓名
            this.teacherMarking.id = item.id;
            this.teacherMarking.number = item.number;
            this.teacherMarking.name = item.name;
        },
        // 在界面添加监考老师
        addProctor(teacherProctor){
            this.teacherProctors.push(teacherProctor);
            this.teacherProctor = {id:'',number:'', name:''} //清空原类
        },
        // 在界面添加阅卷老师
        addMarking(teacherMarking){
            this.teacherMarkings.push(teacherMarking);
            this.teacherMarking = {id:'',number:'', name:''} //清空原类
        },
        // 移除监考老师或者阅卷老师
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        // 发布考试. 监考老师和阅卷老师
        examDeliver(){
            this.$refs.exam.validate( async(success) => {
                if (success) {
                    var exam = this.exam;
                    // 监考老师的id
                    var teacherIds1 = [];
                    var teacherIds2 = [];
                    for(let i=0;i<this.teacherProctors.length;i++)
                    {
                        teacherIds1.push(this.teacherProctors[i].id);
                    }
                    // 阅卷老师的id
                    for(let i=0;i<this.teacherMarkings.length;i++)
                    {
                        teacherIds2.push(this.teacherMarkings[i].id);
                    }
                    // ,this.$qs.stringify(params,{ indices: false })
                    // 检验监考老师和阅卷老师是不是都有
                    exam.paperId = this.examFinal.id;
                    let params = {
                        exam:exam,
                        teacherIds1:teacherIds1,
                        teacherIds2:teacherIds2, 
                        };
                    let result =await this.$API.exam_paper_management.releasePaperToExam(params);

                    if (result.code == 20000) {
                        this.$message({
                        type: "success",
                        message: "发布考试成功",
                        });
                        this.getPageList();
                    
                    }
                    else{
                        this.$message({
                        type: "warning",
                        message: "发布考试失败",
                        });
                    }   
                    

                } 
                // else {
                //     console.log('error submit!!');
                //     return false;
                // }
            });

        },



    }

}
</script>

<style scoped>

 .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 5px;
  }
</style>
